<template>
  <div>
    <el-dialog
      v-model="exportInfo.isShow"
      :before-close="handleClose"
      title="数据导出"
      :showClose="true"
      width="800px"
    >
      <el-form :inline="true" label-position="right" v-model="exInfo">
        <el-row :gutter="16">
          <el-col :span="8">
            <el-form-item label="导出格式" prop="exportType">
              <el-radio-group v-model="exInfo.exportType" size="small">
                <el-radio-button label="xlsx">xlsx</el-radio-button>
                <el-radio-button label="cvs">cvs</el-radio-button>
                <el-radio-button label="pdf">pdf</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="导出数据" prop="exportData">
              <el-radio-group v-model="exInfo.dataAll" size="small">
                <el-radio-button label="0">全部</el-radio-button>
                <el-radio-button label="1">当前页</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="16">
          <el-col :span="8">
            <el-form-item label="文件名字" prop="exportData">
              <el-input
                v-model="exInfo.fileName"
                placeholder="请输入文件名字"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="导出列" prop="space">
              <!-- <el-select v-model="exInfo.columns" placeholder="选择导出列" @change="changeSpace" multiple="true" collapse-tags-tooltip collapse-tags>
                <el-option v-for="(item, num) in tableData.columns" :key="num" :label="item.title" :value="item.key">
                </el-option>

              </el-select> -->
              <el-select
                v-model="exInfo.columns"
                placeholder="默认全部"
                @change="changeColum"
                multiple="true"
                collapse-tags-tooltip
                collapse-tags
              >
                <yu-select
                  :columns="tableData.columns"
                  codeValue="key"
                  codeName="title"
                  required="false"
                  multiple
                >
                </yu-select>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div>
        <el-button type="primary" @click="exportBtn">导出数据</el-button>
        <el-button @click="exportInfo.isShow = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import YuSelect from '@/components/com/YuSelect.vue';
import exportExcel from '@/pub/export-excel.js';
import { ref, watch, toRef, onUpdated } from 'vue';
const props = defineProps({
  exportInfo: {
    type: Object,
    default: () => ({ isShow: false }),
  },
});
onUpdated(() => {
  tableData.value = exportInfo.value.tableData;
  expage.value = exportInfo.value.expage;
});
const dataAll = ref('0');
const tableData = ref([]);
const expage = ref([]);
const exportInfo = toRef(props, 'exportInfo');
const exInfo = ref({
  exportType: 'xlsx',
  dataAll: '0',
  columns: [],
  fileName: '',
  exportData: '',
});
let title = [];
let keys = [];
const exportBtn = () => {
  let exData = [];
  if (exInfo.value.dataAll == '1') {
    exData = tableData.value.data.slice(
      (expage.value.currentPage - 1) * expage.value.pagesize,
      expage.value.currentPage * expage.value.pagesize
    );
  } else {
    exData = tableData.value.data;
  }
  debugger;
  if (title.length === 0) {
    tableData.value.columns.find(item => {
      if (item.key) {
        console.log(item.title);
        console.log(item.key);
        title.push(item.title);
        keys.push(item.key);
      }
    });
  }
  const param = {
    title: title,
    key: keys,
    autoWidth: true,
    filename: exInfo.value.fileName || '导出数据',
    data: exData,
  };
  console.log(param);
  exportExcel.export_array_to_excel(param);
};

const changeColum = e => {
  debugger;
  keys = [];
  title = [];
  for (let i = 0; i < e.length; i++) {
    tableData.value.columns.find(item => {
      if (item.key == e[i]) {
        title.push(item.title);
        keys.push(item.key);
      }
    });
  }
};
</script>
<style lang="scss" scoped></style>
